/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-28 15:49:05
 * @LastEditTime: 2022-04-29 14:37:14
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'

import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {
  searchFrom = async (e) => {
    console.log(e);
    PubSub.publishSync('setState', { isFirst: false, loading: true });
    try {
      const res = await fetch(`api/search/users?q=${this.inputRef.value}`)
      const data = await res.json()
      PubSub.publishSync('setState', { list: data.items, loading: false });

    } catch (error) {
      PubSub.publishSync('setState', { loading: false, error: error.message })
    }

    //   axios.get(`api/search/users?q=${this.inputRef.value}`).then(
    //     response => {
    //       PubSub.publishSync('setState', { list: response.data.items, loading: false });
    //     },
    //     error => {
    //       console.log(error);
    //       PubSub.publishSync('setState', { loading: false, error: error.message })
    //     }
    //   )
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          <input type="text" ref={e => this.inputRef = e} placeholder="输入你要搜索的名字" />&nbsp;<button onClick={e => this.searchFrom(e)}>搜索</button>
        </div>
      </section>
    )
  }
}
